<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索 -->
      <el-row :gutter="20">
        <!-- 栅格总共划分了24快,相加等于24就占满了整行 -->
        <el-col :span="13">
          <el-input
          placeholder="请输入内容"
          v-model="query.proviso"
          clearable
          @clear="getUsers">
            <el-button slot="append" icon="el-icon-search" @click="getUsers"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="toAddUser">添加单用户</el-button>
        </el-col>
      </el-row>
      <!-- 列表 -->
      <el-table :data="users" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="姓名" prop="fullname"></el-table-column>
        <el-table-column label="用户类型" prop="role"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="状态">
          <!-- 作用域插槽,旧语法为slot-scope="scope" -->
          <template v-slot="scope">
            <el-switch v-model="scope.row.state" @change="switchState(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- {{ scope }} -->
            <!-- 修改用户 -->
            <el-button type="primary" icon="el-icon-edit" @click="toUpdateUser(scope.row.id)"></el-button>
            <el-button type="info" icon="el-icon-delete" @click="toDeleteUser(scope.row.id)"></el-button>
            <!-- 分配角色 -->
            <el-tooltip effect="dark" content="分配角色" placement="top">
              <el-button type="warning" icon="el-icon-setting"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pagenum"
      :page-sizes="[1,2,5,10]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      ></el-pagination>
    </el-card>

    <user-create ref="userCreateRef"></user-create>

    <user-update ref="userUpdateRef"></user-update>

  </div>
</template>

<script>
import UserCreate from '@/views/user/Create'
import UserUpdate from '@/views/user/Update'

export default {
  data () {
    return {
      query: {
        proviso: '',
        // 当前页
        pagenum: 1,
        // 每页数据数
        pagesize: 2
      },
      users: [],
      total: 0
    }
  },
  methods: {
    async getUsers () {
      const { data } = await this.$http.get('/api/user/list', {
        params: this.query
      })
      if (!data || !data.success) return this.$message.error('获取用户列表失败')
      console.log(data)
      this.users = data.users
      this.total = data.total
    },
    // 监听 pagesize 改变的事件
    handleSizeChange (newSize) {
      console.log(newSize)
    },
    // 监听 页码值 改变事件
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.query.pagenum = newPage
    },
    // 改变用户状态
    async switchState (user) {
      console.log(user)
      const { data } = await this.$http.put(`api/user/${user.id}/state/${user.state}`)
      if (data && data.success) return this.$message.success('修改成功')
      return this.$message.error(data.error.message)
    },
    toAddUser () {
      this.$refs.userCreateRef.show()
    },
    toUpdateUser (id) {
      this.$refs.userUpdateRef.show(id)
    },
    async toDeleteUser (id) {
      const confirmResult = await this.$confirm('此操作将删除用户,是否继续?', '提示', {
        confrimButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      // confirmResult 为字符串,确定为confirm,取消为cancel
      if (confirmResult !== 'confirm') return this.$message.info('操作已取消')
      const { data } = await this.$http.delete(`api/user/${id}`)
      if (data && data.success) return this.$message.success('删除成功')
      return this.$message.error(data.error.message)
    }
  },
  components: {
    UserCreate,
    UserUpdate
  },
  created () {
    this.getUsers()
  }
}
</script>

<style lang="less" scoped>
</style>
